<template>
  <div id="alert" v-if="is_show==1" class="shadow">
    <div class="con">
      <div class="title">
        <slot name="title">{{title}}</slot>
      </div>
      <div class="content">
        <slot name="content">{{content}}</slot>
      </div>
      <div class="confirmBtn shadow" @click="confirmDo">确 定</div>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data(){
    return {
      is_show:0,
      title:'提 示',
      content:'error'
    }
  },methods:{
    confirmDo(){
      let that=this
      that.is_show=0
    },
    show(title,content){
      if(title!=undefined)this.title=title
      if(content!=undefined)this.content=content
      this.is_show=1
    }
  }
}
</script>
<style type="text/css" scoped>
#alert{
  top: 0;
  position: fixed;width: 10rem;
  height:100%;
  z-index: 9999;
}
#alert .con{
  width:8rem;
  margin-left:1rem;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: .2rem;
  margin-top:5rem;
  border: 1px solid #eee;
}
#alert .title{border-bottom: 1px solid #dddddd;font-weight: bold;height: 1rem;line-height: 1rem;background-color:#dddddd;text-align: center;}
#alert .content{background:#eeeeee;min-height: 3rem;box-sizing: border-box;padding: .5rem;}
#alert .confirmBtn{background:#dddddd;text-align: center;height: 1rem;line-height: 1rem;border-top: 1px solid #eeeeee}
</style>
